<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
			<script type="text/javascript" src="jquery_1_7_2.js"></script>
            <script type="text/javascript" src='popup.js'></script>
            <style type="text/css">
            	
				body {
					background:#C0C0C0;
				}
				
				#content-slider {
				    width: 450px;  
				    overflow: hidden;  
				    height: 160px;  
				}  
				  
				#content-slider-inside {  
					color:#285589;
				    list-style: none;  
				    height: 320px;      
				    overflow: scroll;  
				    overflow-y: hidden; 
					background:#E2E2E2;
				}  
				  
			 	#content-slider-inside li {  
				    width: 650px;  
				    height: 160px; 
					margin-left: -35px; 
				}  
				
				#selectBox {
					width: 193px;
				}	
				
				table {
					border:1px solid #000000;
					width:450px;
					height:150px;
					margin-top:2px;
					background:#FFFFFF;
				}

				table td {
					border:1px solid #000000;
					height:25px;
					max-width: 150px;
					word-wrap: break-word;
				}
				
				table th {
					border:1px solid #000000;
					background:#777777;
					height:25px;
					max-width: 150px;
				}
				
				#warningDiv {
					color:#912323;
				}
				
				
            </style>
        	<title>Extension</title>
        </head>
		<body style="width:450px;height:315px;">
		
		<div id="content-slider">  
		    <ul id="content-slider-inside">  
		        <li id="one">
		        	<div>
		        		Select a type: <br />
						<select id="comboHTML" style="width:150px;" >
							<option>a</option>
							<option>span</option>
							<option>area</option>
							<option>body</option>
							<option>button</option>
							<option>div</option>
							<option>form</option>
							<option>h1</option>
							<option>h2</option>
							<option>h3</option>
							<option>h4</option>
							<option>h5</option>
							<option>h6</option>
							<option>input</option>
							<option>img</option>
							<option>label</option>
							<option>menu</option>
							<option>p</option>
							<option>span</option>
							<option>select</option>
							<option>table</option>
							<option>textarea</option>
						</select>
						<a id="myFind" href="#two">Find it</a><br />
						<div id="warningDiv"></div>
						When selecting an element to discover, remember that your element
						<br />
						must have an ID for Tutip to function correctly.
		        	</div>
		        </li>  
		        <li id="two">
		        	<div>
						<div id="fillDiv" ></div>
						<div id="formDiv">
							Title: <br />
							<input id="titleInput" type="text" style="width:300px;"></input>
							<br />
							Description: <br />
							<textarea id="descInput" rows="0" cols="0" type="text" style="width:300px; height:40px;"></textarea>			
						</div>
						<a href="#one">Back</a> || <a href="#three">Next</a>
					</div>
				</li>  
		        <li id="three">
		        	
					<div>
						Tutorial Location: <br />
						<select id="locationInput" style="width:300px;" >
							<option value="TOP_LEFT">top left</option>
							<option value="TOP_RIGHT">top right</option>
							<option value="TOP_CENTER">top center</option>
							<option value="BOTTOM_LEFT">bottom left</option>
							<option value="BOTTOM_RIGHT">bottom right</option>
							<option value="BOTTOM_CENTER">bottom center</option>
							<option value="RIGHT_CENTER">right center</option>
							<option value="RIGHT_TOP">right top</option>
							<option value="RIGHT_BOTOM">right bottom</option>
							<option value="LEFT_CENTER">left center</option>
							<option value="LEFT_TOP">left top</option>
							<option value="LEFT_BOTTOM">left bottom</option>
							<option value="CENTER">center</option>
						</select><br />
						Pointer Location: <br />
						<select id="tipInput" style="width:300px;" >
							<option value="TOP_LEFT">top left</option>
							<option value="TOP_RIGHT">top right</option>
							<option value="TOP_CENTER">top center</option>
							<option value="BOTTOM_LEFT">bottom left</option>
							<option value="BOTTOM_RIGHT">bottom right</option>
							<option value="BOTTOM_CENTER">bottom center</option>
							<option value="RIGHT_CENTER">right center</option>
							<option value="RIGHT_TOP">right top</option>
							<option value="RIGHT_BOTOM">right bottom</option>
							<option value="LEFT_CENTER">left center</option>
							<option value="LEFT_TOP">left top</option>
							<option value="LEFT_BOTTOM">left bottom</option>
							<option value="CENTER">center</option>
						</select><br />
						Stype: <br /> 
						<select id="styleInput" style="width:300px;">
							<option value="-none">None</option>
							<option value="-red">Red</option>
							<option value="-blue">Blue</option>
							<option value="-dark">Dark</option>
							<option value="-light">Light</option>
							<option value="-green">Green</option>
							<option value="-jtools">JTools</option>
							<option value="-plain">Plain</option>
							<option value="-youtube">Youtube</option>
							<option value="-cluetip">Cluetip</option>
							<option value="-tipsy">Tipsy</option>
							<option value="-tipped">Tipped</option>
							<option value="-bootstrap">Bootstrap</option>
							<option value="-rounded">Rounded</option>	
						</select> <br />
						<a id="testTip" href="#four">Test Tip</a>
					</div>
				</li>  
				<li id="four">
					<div>
						Displayed is the tool tip on the page. If this is what you want, click <br />
						'add tip' to add it to your steps. Otherwise, start over. <br /><br /> 
						<a id="addTip" href="#five">Add Tip</a> || <a id="startOver" href="#one">Start Over</a>
					</div>
				</li>
				<li id="five">
					<div>
						Tip added. If you are complete, follow the link to get the completed tips, <br />
						otherwise add a new step. <br /><br />
						<a id="optionsLink" href="#">Get data</a> || <a href="#one">Add new step</a>
						
					</div>
				</li>
		    </ul>  
		</div> 
		<div id="tableContent">
			<table id="stepTable">
				<tr>
					<th>Step Number</th>
					<th>Element ID</th>
					<th>Title</th>
				</tr>
			</table>
		</div>	
		</body>
	</html>
